<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete） - 组合框（Combobox）</title>
    <link rel="stylesheet" type="text/css"
          href="css/jquery/combobox/jquery-ui.min-1.10.4.css"/>
    <script type="text/javascript"
            src="js/jquery/combobox/jquery.min-1.10.2.js"></script>
    <script type="text/javascript"
            src="js/jquery/combobox/jquery-ui.min-1.10.4.js"></script>
    <style>
        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* 支持： IE7 */
            *height: 1.7em;
            *top: 0.1em;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 0.3em;
        }
    </style>
    <script>
        $(function () {
            $.ajax({
                       url: "../reg-declaraCompany",
                       dateType: "json",
                       type: "post",
                       success: function (data) {
                           var optionstring = "";
                           for (var i = 0; i < (data).length; i++) {
                               optionstring += "<option value=\"" + data[i][1] + "\" >"
                                               + data[i][0] + "</option>";
                           }
                           $("#s3").html(optionstring);
                       }
                   });
        });
        (function ($) {
            $
                    .widget(
                            "custom.combobox",
                            {
                                _create: function () {
                                    this.wrapper = $("<span>").addClass(
                                            "custom-combobox").insertAfter(
                                            this.element);

                                    this.element.hide();
                                    this._createAutocomplete();
                                    this._createShowAllButton();
                                },

                                _createAutocomplete: function () {
                                    var selected = this.element
                                            .children(":selected"), value = selected
                                                                                    .val()
                                            ? selected.text() : "";

                                    this.input = $("<input>")
                                            .appendTo(this.wrapper)
                                            .val(value)
                                            .attr("title", "")
                                            .attr("id", "onlySelect")
                                            .addClass(
                                                    "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                                            .autocomplete({
                                                              delay: 0,
                                                              minLength: 0,
                                                              source: $.proxy(this, "_source")
                                                          }).tooltip({
                                                                         tooltipClass: "ui-state-highlight"
                                                                     });

                                    this._on(this.input, {
                                        autocompleteselect: function (event, ui) {
                                            ui.item.option.selected = true;
                                            this._trigger("select", event, {
                                                item: ui.item.option
                                            });
                                        },

                                        autocompletechange: "_removeIfInvalid"
                                    });
                                },

                                _createShowAllButton: function () {
                                    var input = this.input, wasOpen = false;

                                    $("<a>")
                                            .attr("tabIndex", -1)
                                            .attr("title", "Show All Items")
                                            .tooltip()
                                            .appendTo(this.wrapper)
                                            .button(
                                                    {
                                                        icons: {
                                                            primary: "ui-icon-triangle-1-s"
                                                        },
                                                        text: false
                                                    })
                                            .removeClass("ui-corner-all")
                                            .addClass(
                                                    "custom-combobox-toggle ui-corner-right")
                                            .mousedown(
                                                    function () {
                                                        wasOpen = input
                                                                .autocomplete(
                                                                        "widget")
                                                                .is(":visible");
                                                    }).click(function () {
                                        input.focus();

                                        // 如果已经可见则关闭
                                        if (wasOpen) {
                                            return;
                                        }

                                        // 传递空字符串作为搜索的值，显示所有的结果
                                        input.autocomplete("search", "");
                                    });
                                },

                                _source: function (request, response) {
                                    var matcher = new RegExp($.ui.autocomplete
                                            .escapeRegex(request.term), "i");
                                    response(this.element
                                                     .children("option")
                                                     .map(
                                                             function () {
                                                                 var text = $(this).text();
                                                                 if (this.value
                                                                     && (!request.term || matcher
                                                                                 .test(text))) {
                                                                     return {
                                                                         label: text,
                                                                         value: text,
                                                                         option: this
                                                                     };
                                                                 }
                                                             }));
                                },

                                _removeIfInvalid: function (event, ui) {

                                    // 选择一项，不执行其他动作
                                    if (ui.item) {
                                        return;
                                    }

                                    // 搜索一个匹配（不区分大小写）
                                    var value = this.input.val(), valueLowerCase = value
                                            .toLowerCase(), valid = false;
                                    this.element
                                            .children("option")
                                            .each(
                                                    function () {
                                                        if ($(this).text()
                                                                    .toLowerCase()
                                                            === valueLowerCase) {
                                                            this.selected = valid = true;
                                                            return false;
                                                        }
                                                    });

                                    // 找到一个匹配，不执行其他动作
                                    if (valid) {
                                        return;
                                    }

                                    // 移除无效的值
                                    this.input.val("").attr("title",
                                                            value + " didn't match any item")
                                            .tooltip("open");
                                    this.element.val("");
                                    this._delay(function () {
                                        this.input.tooltip("close").attr("title",
                                                                         "");
                                    }, 2500);
                                    this.input.data("ui-autocomplete").term = "";
                                },

                                _destroy: function () {
                                    this.wrapper.remove();
                                    this.element.show();
                                }
                            });
        })(jQuery);

        $(function () {
            $("#s3").combobox();
        });
    </script>
</head>
<body>
<div class="ui-widget">
    <select id="s3">
    </select>
</div>
<!-- 	<button id="toggle">显示基础的选择框</button> -->
</body>
</html>
